<template>
  <div class="album albumvideo">
    <div>
      <div class="pic_img">
        <div class="pic_img_box">
          <el-upload
            class="avatar-uploader"
            action="javascript:;"
            :on-progress="uploadVideoProcess"
            :on-success="handleVideoSuccess"
            :before-upload="beforeUploadVideo"
            :show-file-list="false"
            :http-request="httpRequest"
          >
            <video
              v-if="videoForm.showVideoPath != '' && !videoFlag"
              class="avatar video-avatar"
              controls="controls"
              preload
            >
              <source :src="videoForm.showVideoPath" type="video/mp4">
            </video>
            <i
              v-else-if="videoForm.showVideoPath == '' && !videoFlag"
              class="el-icon-plus avatar-uploader-icon"
            />
            <el-progress
              v-if="videoFlag == true"
              type="circle"
              :percentage="videoUploadPercent"
              style="margin-top: 7px"
            />
          </el-upload>
        </div>
      </div>
    </div>
    <p class="Upload_pictures">
      <span />
      <span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span>
    </p>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      videoFlag: false,
      // 是否显示进度条
      videoUploadPercent: 0,
      // 进度条的进度，
      isShowUploadVideo: false,
      // 显示上传按钮
      videoForm: {
        showVideoPath: ''
      }
    }
  },
  created() {
    this.videoForm.showVideoPath = this.value
  },
  methods: {
    // 上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
          'video/mov'
        ].indexOf(file.type) == -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    // 上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true
      this.videoFlag = false
      this.videoUploadPercent = 0
    },
    async httpRequest(res) {
      const formData = new FormData()
      formData.append('file', res.file)

      const { data: result } = await this.$api.question.questionUploadPost(
        formData
      )
      this.videoForm.showVideoPath = this.baseApi + result.url
      this.$emit('input', result.url)
      // currItem.image = result.data.url
    }
  }
}
</script>

<style scoped lang="scss">
//.avatar-uploader .el-upload {
//  border: 1px dashed #d9d9d9;
//  border-radius: 6px;
//  cursor: pointer;
//  position: relative;
//  overflow: hidden;
//}
//.avatar-uploader .el-upload:hover {
//  border-color: #409EFF;
//}
.container {
  margin-top: 15px;
  border: 1px solid #dcdfe6;
  height: 140px;
  width: 280px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.hasvideo {
    border: none;
    background: transparent;
  }
  .avatar-uploader-icon {
    font-size: 14px;
    color: #8c939d;
    height: 140px;
    width: 280px;
    line-height: 178px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    > span {
      font-style: normal;
    }
  }
  > .deleteVideo {
    position: absolute;
    right: 18px;
    top: 185px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.avatar {
  max-height: 135px;
  max-width: 280px;
  display: block;
  border-radius: 14px;
}
</style>
